﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>我秀地图</title>
    <meta charset="utf-8"/>
    <link href="../css/imap-gl.css" rel="stylesheet"/>
    <script src="../js/imap-gl.js"></script>
	    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
    <script src="https://cdn.bootcss.com/proj4js/2.4.3/proj4.js"></script>
    <script src="https://cdn.bootcss.com/proj4leaflet/1.0.1/proj4leaflet.min.js"></script>
    <style>
        html, body {
            padding: 0;
            margin: 0;
        }

        #map2 {
            position: absolute;
            right: 0;
            height: 100%;
            width: 50%;
            float: left;
        }

        #map1 {
            position: absolute;
            left: 0;
            height: 100%;
            width: 50%;
            float: left;
        }
    </style>
</head>

<body>
<div id="map1"></div>
<div id="map2"></div>

<script>
    var map1_x;
    var map1_y;
    var map1_zoom;
    var map2_x;
    var map2_y;
    var map2_zoom;
    var map1_pitch;
    var map2_pitch;
    var map1_bear;
    var map2_bear;
	
	
	
	
	var baiduCRS = new L.Proj.CRS('EPSG:900913', '+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs', {
    resolutions: function () {
        var level = 20
        var res = [];
        res[0] = Math.pow(2, 18);
        for (var i = 1; i < level; i++) {
            res[i] = Math.pow(2, (18 - i))
        }
        return res;
    }(),
    origin: [0, 0],
    //bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])
	bounds: L.bounds([20026376.39, 0], [0, 20048966.10])
});
var normalMapUrl = 'http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1',
    satelliteMapUrl = 'http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46',
    annotionMapUrl = 'http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl';
var normalMap = L.tileLayer(normalMapUrl, {
        subdomains: '0123456789',
        maxZoom: 21,
        minZoom: 3,
        tms: true
    }),
    normalMapOp = L.tileLayer(normalMapUrl, {
        subdomains: '0123456789',
        maxZoom: 21,
        minZoom: 3,
        opacity: 0.6,
        tms: true
    }),
    satelliteMap = L.tileLayer(satelliteMapUrl, {
        subdomains: '0123456789',
        maxZoom: 21,
        minZoom: 3,
        tms: true
    }),
    annotionMap = L.tileLayer(annotionMapUrl, {
        subdomains: '0123456789',
        maxZoom: 21,
        minZoom: 3,
        tms: true
    });

var baseLayers = {
    "地图": normalMap,
    "影像": satelliteMap
}
var overlayLayers = {
    "标注": annotionMap,
    "半透明": normalMapOp
}
var map = L.map("map1", {
    crs: baiduCRS,
    center: [39.952128183377255,105.27771321722543],
    zoom: 3,
    layers: [normalMap],
    zoomControl: false
});
L.control.layers(baseLayers, overlayLayers).addTo(map);
L.control.zoom({
    zoomInTitle: '放大',
    zoomOutTitle: '缩小'
}).addTo(map);


    var map2 = new imapgl.Map({
        container: 'map2',
        center: [105.27771321722543, 39.952128183377255],
        zoom: 3,
        style: "../styles/v1/light-v10-gcj02.json"
    });
    map2.on('render', function () {

       var res = CoordinateUtil.gcj02tobd09(map2.getCenter().lng,map2.getCenter().lat);
		map.setView([res.lat,res.lng], map2.getZoom()+2);
    });

var CoordinateUtil = {
	x_pi: 3.14159265358979324 * 3000.0 / 180.0,
	//pai
	pi: 3.1415926535897932384626,
	//离心率
	ee: 0.00669342162296594323,
	//长半轴
	a: 6378245.0,
	//百度转国测局
	bd09togcj02: function(bd_lon, bd_lat) {
		var x = bd_lon - 0.0065;
		var y = bd_lat - 0.006;
		var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * CoordinateUtil.x_pi);
		var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * CoordinateUtil.x_pi);
		var gg_lng = z * Math.cos(theta);
		var gg_lat = z * Math.sin(theta);
		return {
			lng: gg_lng,
			lat: gg_lat
		}
	},
	//国测局转百度
	gcj02tobd09: function(lng, lat) {
	    var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * CoordinateUtil.x_pi);
	    var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * CoordinateUtil.x_pi);
		var bd_lng = z * Math.cos(theta) + 0.0065;
		var bd_lat = z * Math.sin(theta) + 0.006;
		return {
			lng: bd_lng,
			lat: bd_lat
		};
	},
	//国测局转84
	gcj02towgs84: function(lng, lat) {
	    var dlat = CoordinateUtil.transformlat(lng - 105.0, lat - 35.0);
	    var dlng = CoordinateUtil.transformlng(lng - 105.0, lat - 35.0);
		var radlat = lat / 180.0 * CoordinateUtil.pi;
		var magic = Math.sin(radlat);
		magic = 1 - CoordinateUtil.ee * magic * magic;
		var sqrtmagic = Math.sqrt(magic);
		dlat = (dlat * 180.0) / ((CoordinateUtil.a * (1 - CoordinateUtil.ee)) / (magic * sqrtmagic) * CoordinateUtil.pi);
		dlng = (dlng * 180.0) / (CoordinateUtil.a / sqrtmagic * Math.cos(radlat) * CoordinateUtil.pi);
		var mglat = lat + dlat;
		var mglng = lng + dlng;
		return {
			lng: lng * 2 - mglng,
			lat: lat * 2 - mglat
		};
	},
	//经度转换
	transformlat: function(lng, lat) {
		var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
		ret += (20.0 * Math.sin(6.0 * lng * CoordinateUtil.pi) + 20.0 * Math.sin(2.0 * lng * CoordinateUtil.pi)) * 2.0 / 3.0;
		ret += (20.0 * Math.sin(lat * CoordinateUtil.pi) + 40.0 * Math.sin(lat / 3.0 * CoordinateUtil.pi)) * 2.0 / 3.0;
		ret += (160.0 * Math.sin(lat / 12.0 * CoordinateUtil.pi) + 320 * Math.sin(lat * CoordinateUtil.pi / 30.0)) * 2.0 / 3.0;
		return ret;
	},
	//纬度转换
	transformlng: function(lng, lat) {
		var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
		ret += (20.0 * Math.sin(6.0 * lng * CoordinateUtil.pi) + 20.0 * Math.sin(2.0 * lng * CoordinateUtil.pi)) * 2.0 / 3.0;
		ret += (20.0 * Math.sin(lng * CoordinateUtil.pi) + 40.0 * Math.sin(lng / 3.0 * CoordinateUtil.pi)) * 2.0 / 3.0;
		ret += (150.0 * Math.sin(lng / 12.0 * CoordinateUtil.pi) + 300.0 * Math.sin(lng / 30.0 * CoordinateUtil.pi)) * 2.0 / 3.0;
		return ret;
	},
	getWgs84xy:function(x,y){
		//先转 国测局坐标
		var doubles_gcj = CoordinateUtil.bd09togcj02(x, y); //（x 117.   y 36. ）
		//国测局坐标转wgs84
		var doubles_wgs84 = CoordinateUtil.gcj02towgs84(doubles_gcj.lng, doubles_gcj.lat);
		//返回 纠偏后 坐标
		 
		return doubles_wgs84;
	}
}

</script>
</body>


</html>

